<template>
	<view class="uni_box home">
		<navbar title='购物车' :yin="true">
		</navbar>
		<view class="content">
			<view class="goulist" v-for="(item,index) in 20" :key="index">
				<view class="gview gactive">
					<image class="gous" src="@/pages_subject/static/img/gous.png" mode="" />
				</view>
				<image src="https://cdn.uviewui.com/uview/swiper/1.jpg" class="gouimg" mode=""></image>
				<view class="gright">
					<view class="rone">
						<text class="gname">官方教材</text>
						<text class="gprice">¥198.00</text>
						<text class="gquan">券后价¥196.00 </text>
					</view>
					<view class="jieview">
						<view class="jia">-</view>
						<view class="nums">2</view>
						<view class="jia">+</view>
					</view>
				</view>
			</view>

			<view class="gouobot">
				<view class="gview gactive">
					<image class="gous" src="@/pages_subject/static/img/gous.png" mode="" />
				</view>
				<text class="quan">全选</text>
				<view class="bright">
					<text class="quan">已选1件</text>
					<view class="heji">
						<text class="hename">合计：<text class="henums">¥196.00</text></text>
						<text class="henums">共减3元</text>
					</view>
					<view class="jie" @click="getorder">结算</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			getorder(){
				this.navrouter("/pages_subject/twoPage/MinePage/ConfirmOrder");
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.content{
		background-color: #fff;
		padding-bottom: 120rpx;
		.gview{
			// display: inline-block;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20rpx;
			height: 20rpx;
			margin-right: 20rpx;
			border: 1px solid #BFBFBF;
			.gous{
				display: none;
				width: 12rpx;
				height: 9rpx;

			}
		}
		.gactive{
			background: #E8433A;
			border: 1px solid #E8433A;
			.gous{
				display: inline-block;
				position: relative;

			}
		}
		.goulist{
			display: flex;
			flex-direction: row;
			border-bottom: 1rpx solid #eee;
			padding: 24rpx 30rpx;
			align-items: center;
			
			.gouimg{
				width: 208rpx;
				height: 135rpx;
				border-radius: 5rpx;
				margin-right: 20rpx;
			}
			.gright{
				flex: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 100%;
				.rone{
					display: flex;
					flex-direction: column;
					.gname{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						display: block;
						margin-bottom: 20rpx;
					}
					.gprice{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #999999;
					}
					.gquan{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FF7D29;
						display: block;
						margin-top: 8rpx;
					}

				}
				.jieview{
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
				
					.jia{
						width: 30rpx;
						height: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #AAAAAA;
						line-height: 25px;
						border: 1px solid #BFBFBF;
						padding-bottom: 3rpx;
					}
					.nums{
						display: inline-block;
						margin: 0 14rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #AAAAAA;
					}
				}
			}
		}
		.gouobot{
			position: fixed;
			width: 100%;
			height: 100rpx;
			bottom: 0;
			left: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 30rpx;
			border-top:1rpx solid #eee;
			background: #FFFFFF;
			z-index: 100;
			.quan{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #999999;
			}
			.bright{
				margin-left: auto;
				display: flex;
				flex-direction: row;
				align-items: center;

			}
			.heji{
				display: flex;
				flex-direction: column;
				margin: 0 20rpx;
				.hename{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #999999;
				}
				.henums{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #FA504E;
				}
			}
			.jie{
				margin-left: 45rpx;
				width: 122rpx;
				height: 45rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
